<template>
  <n-select
    v-model:value="selectedTemplateId"
    :options="templateOptions"
    placeholder="选择提示词模板"
    :placement="placement as any"
    :filterable="filterable"
    :clearable="clearable"
    :loading="loading"
    :remote="remoteFiltering"
    @update:value="handleSelect"
    @search="handleSearch"
  />
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { NSelect } from 'naive-ui'
import { promptService, type PromptTemplate } from '../services/prompt-service'

// 定义组件属性
const props = defineProps({
  modelValue: { type: [Number, Object], default: null }, // 支持数字ID或对象
  placement: { type: String, default: 'bottom-start' }, // 展开方向，默认向下
  filterable: { type: Boolean, default: true }, // 是否支持前端过滤
  clearable: { type: Boolean, default: true }, // 是否可清空
  remoteFiltering: { type: Boolean, default: false }, // 是否使用远程过滤
  category: { type: String, default: '' }, // 默认分类过滤
  keyword: { type: String, default: '' } // 默认搜索关键词
})

// 定义事件
const emit = defineEmits(['update:modelValue', 'select-template'])

// 状态
const selectedTemplateId = computed(() => {
  // 如果modelValue是对象，取其id属性；如果是数字，直接使用
  if (props.modelValue && typeof props.modelValue === 'object') {
    return props.modelValue.id
  }
  return props.modelValue
})
const templates = ref<PromptTemplate[]>([])
const loading = ref(false)
const searchKeyword = ref('')

// 计算选项
const templateOptions = computed(() => {
  return templates.value.map(template => ({
    label: String(template.name),
    value: Number(template.id)
  }))
})

// 加载模板数据
async function loadTemplates() {
  loading.value = true
  try {
    let response
    
    console.log('PromptTemplateSelector - 开始加载模板, category:', props.category, 'keyword:', props.keyword, 'searchKeyword:', searchKeyword.value)
    
    // 如果有分类过滤，使用分类过滤方法
    if (props.category) {
      response = await promptService.getTemplatesByCategory(props.category)
    }
    // 如果有搜索关键词，使用搜索方法
    else if (props.keyword || searchKeyword.value) {
      const keyword = searchKeyword.value || props.keyword
      response = await promptService.searchTemplatesByName(keyword)
    }
    // 否则获取所有模板
    else {
      response = await promptService.getPromptTemplates()
    }
    
    console.log('PromptTemplateSelector - 响应数据:', response)
    
    // 检查响应格式并处理数据
    if (response.code === 0) {
      templates.value = response.data || []
      console.log('PromptTemplateSelector - 加载的模板数量:', templates.value.length)
      console.log('PromptTemplateSelector - 模板列表:', templates.value)
    } else {
      console.error('PromptTemplateSelector - 加载失败:', response.msg)
      templates.value = []
    }
  } catch (error) {
    console.error('加载提示词模板失败:', error)
    templates.value = []
  } finally {
    loading.value = false
  }
}

// 处理选择
function handleSelect(value: number | null) {
  const template = templates.value.find(t => t.id === value)
  // 发出ID而不是整个模板对象
  emit('update:modelValue', value || null)
  if (template) {
    emit('select-template', template)
  }
}

// 处理搜索（当启用远程过滤时）
function handleSearch(query: string) {
  if (props.remoteFiltering) {
    searchKeyword.value = query
    loadTemplates()
  }
}

// 监听props变化
watch(() => props.category, () => {
  loadTemplates()
})

watch(() => props.keyword, (newVal) => {
  searchKeyword.value = newVal
  loadTemplates()
})

// 暴露方法给父组件
defineExpose({
  loadTemplates,
  refresh: loadTemplates
})

onMounted(() => {
  loadTemplates()
})
</script>
